<template>
    <div class="bg-gray-100 p-4">
        <ul>
            <li v-for="(documentItem, index) in documents" :key="documentItem.id"
                class="bg-white p-4 mb-4 rounded shadow-md">
                <div class="flex justify-between items-center">
                    <div>
                        <span class="text-gray-800 font-bold mr-2">{{ index + 1 }}</span>
                        <span class="text-gray-600 mr-2">{{ documentItem.title }}</span>
                        <span class="text-gray-600">{{ documentItem.updateTime }}</span>
                    </div>
                    <button @click="selectDocument(documentItem.id)"
                        class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                        查看切片
                    </button>
                </div>
            </li>
        </ul>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useDocumentApi } from '../../../api/document';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
// 文档信息对象接口
interface DocumentItem {
    id: string;
    title: string;
    updateTime: string;
}
const router = useRouter();
const documents = ref<DocumentItem[]>([]);
const documentApi = new useDocumentApi();
const selectDocumentId = ref('');
// 获取所有文档信息
const getDocumentInfos = () => {
    documents.value = [];
    documentApi.getDocumentsInfo().then(response => {
        if (response.data.code == 1) {
            let dataList = response.data.data.dataList;
            // 格式处理
            for (const index in dataList) {
                documents.value.push({
                    id: dataList[index].id,
                    title: dataList[index].title,
                    updateTime: dataList[index].updateTime,
                })
            }
        } else {
            ElMessage.error(response.data.message);
        }
    }).catch(error => {
        console.error(error);
    })
}

// 选择文档查看对应切片
const selectDocument = (docId: string) => {
    selectDocumentId.value = docId;
    router.push({
        path: '/setting/splitterDisplay',
        query: {
            docId: selectDocumentId.value
        }
    });
}

onMounted(() => {
    getDocumentInfos();
});
</script>